<template>
	<view class="page">
		<u-overlay :show="show" @click="show = false">
			<view class="warp flex-justify">
				<view class="lt"></view>
				<view class="rt"></view>
				<view class="rb"></view>
				<view class="lb"></view>
				<image class="QR-code" src="../../../static/mortarboard.png" mode=""></image>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
			};
		},
		onLoad() {

		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
		}
	}
</script>

<style lang="less">
	::v-deep .u-transition {
		top: 45px !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	::v-deep .warp {
		align-items: center !important;
		// height: 100%;
		width: 634rpx;
		height: 634rpx;
		position: relative;
	}


	.lt,
	.rt,
	.rb,
	.lb {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
	}

	.lt {
		border-top: 4rpx solid #1872FF;
		border-left: 4rpx solid #1872FF;
		top: 0;
		left: 0;
	}

	.rt {
		border-top: 4rpx solid #1872FF;
		border-right: 4rpx solid #1872FF;
		top: 0;
		right: 0;
	}

	.rb {
		border-bottom: 4rpx solid #1872FF;
		border-right: 4rpx solid #1872FF;
		bottom: 0;
		right: 0;
	}

	.lb {
		border-bottom: 4rpx solid #1872FF;
		border-left: 4rpx solid #1872FF;
		bottom: 0;
		left: 0;
	}

	.QR-code {
		width: 580rpx;
		height: 580rpx;
		background-color: #D8D8D8;
	}
</style>